<template>
    <div class="article-nav">
        <div class="nav-list">
            <div class="nav-item" :class="selectIndex === 0 ? 'active' : ''" @click="handleSelect(0)">
                攻略
            </div>
            <div class="nav-item" :class="selectIndex === 1 ? 'active' : ''" @click="handleSelect(1)">
                笔记
            </div>
            <div class="nav-item" :class="selectIndex === 2 ? 'active' : ''" @click="handleSelect(2)">
                视频
            </div>
            <div class="nav-item" :class="selectIndex === 3 ? 'active' : ''" @click="handleSelect(3)">
                草稿箱
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ArticleNav",
        data() {
            return {
                selectIndex: this.navIndex
            }
        },
        props: {
            componentListIndex: Number,
            default: 0,
            navIndex: Number
        },
        watch: {
            componentListIndex(newValue) {
                this.selectIndex = newValue
            }
        },
        methods: {
            handleSelect(index) {
                this.selectIndex = index
                this.changeURLPar(window.location.href, 'navIndex', index)
                this.$emit('handleSelect', index)
            },
            changeURLPar(destiny, par, par_value) {
                let url = ''
                var pattern = par + '=([^&]*)'
                var replaceText = par + '=' + par_value
                if (destiny.match(pattern)) {
                    url = destiny.replace(/navIndex=(\d+)/, replaceText)
                } else {
                    if (destiny.match('[\?]')) {
                        url = destiny + '&' + replaceText
                    } else {
                        url = destiny + '?' + replaceText
                    }
                }
                window.history.pushState({}, 0, url)
            }
        }
    }
</script>

<style scoped lang="less">
    .article-nav {
        width: 900px;
        height: 64px;
        margin-bottom: 17px;
        background-color: #fff;
        border-radius: 4px;
        padding-left: 24px;
        
        .nav-list {
            .flexed(flex-start);
            
            .nav-item {
                height: 64px;
                margin-right: 40px;
                line-height: 64px;
                text-align: center;
                cursor: pointer;
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                position: relative;
            }
            
            .active {
                &:after {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    content: '';
                    width: 32px;
                    height: 2px;
                    background: rgba(255, 220, 32, 1);
                }
            }
        }
    }
</style>
